<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>客户管理</title>
    <link href="../../../static/css/style.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="../../../static/js/jquery.js"></script>
    <script type="text/javascript" src="../../../static/js/jq-paginator.js"></script>
    <script type="text/javascript">
        //全局信息
        window.datas = {
            //查询条件
            conditionInfo: {
                company: '',
                pageNum: "1",
                pageSize: "5",
            },
            //查询信息
            resultInfo: {},
            //地区信息
            addressInfo:[],
        };
        function tipOpen(content) {
            $(".tipright p").text(content);
            $("#tip").fadeIn(200);
        }

        function tipClose() {
            $("#tip").fadeOut(200);
        }
        //获取地区信息
        function getAddressInfo(){
            $.ajax({
                url: "/commonProvince",
                type: "get",
                dataType: "json",
                success:(data)=>{
                    window.datas.addressInfo=data.data;
                    $(".province").html('<option value="">请选择省份</option>')
                    window.datas.addressInfo.forEach((item,index)=>{
                        $(".province").append(`<option value="${item.id}">${item.pname}</option>`)
                    })
                }
            })
        }
        //选择省份之后
        function provinceChange(){
            let addressInfo=datas.addressInfo;
            let city=[];
            let id=$(".province option:selected").val();
            for (let i = 0;i< addressInfo.length; i++) {
                if(addressInfo[i].id==id){
                    city=addressInfo[i].citys;
                    break;
                }
            }
            $(".city").html('<option value="">请选择城市</option>')
            city.forEach((item,index)=>{
                $(".city").append(`<option value="${item.id}">${item.cname}</option>`);
            })
        }
        //数据渲染到页面
        function reder() {
            let customInfo = this.datas.resultInfo.data;
            $(".formbody").html("");
            customInfo.forEach((item, index) => {
                $(".formbody").append(`<tr>
           <input type="hidden" value="${item.customid}"/>
          <td>${(datas.resultInfo.pageNum-1)*datas.resultInfo.pageSize+index+1}</td>
          <td>${item.customname}</td>
          <td>${item.sex == 2 ? '男' : '女'}</td>
          <td>${item.telephone}</td>
          <td>${item.company}</td>
          <td>${item.provinceName+item.cityName}</td>
          <td>${item.distractime}</td>
          <td>${item.serviceName}</td>
          <td>
          <a class="tablelink" onclick="window.location.href='/market/customer/customerView?customid=${item.customid}'">查看详情</a>
          </td>
        </tr>`)
            });
            $(".blue").eq(0).text(this.datas.resultInfo.totalCount);
            $(".blue").eq(1).text(this.datas.resultInfo.pageNum);
        }
        //获取分页信息
        function getCustomPage(conditionInfo) {
            $.ajax({
                url: `/custom/pageByUid`,
                type: "post",
                dataType: "json",
                contentType: "application/json;charset=utf8",
                data: JSON.stringify(conditionInfo),
                success: (data) => {
                    datas.resultInfo = data.data;
                    reder();
                    if(!data.data.totalPage){
                        datas.resultInfo.totalPage=1;
                    }
                    $('.paginList').jqPaginator('option', {
                        totalPages: datas.resultInfo.totalPage,
                    });
                }
            })
        }
        //获取condition参数
        function getCondition(){
            this.datas.conditionInfo={
                pageNum:1,
                pageSize:5,
                company: $(".company").val(),
                customName:$(".customName").val(),
                provinceId:$(".province option:selected").val(),
                address:$(".city option:selected").val(),
                userId:JSON.parse(localStorage.getItem("user")).uid,
            }
        }
        //点击查询时
        function search() {
            datas.conditionInfo.pageNum = 1;
            getCondition();
            getCustomPage(datas.conditionInfo);
        }
        $(() => {
            //初始化分页器
            $(".paginList").jqPaginator({
                totalPages: 10,
                visiblePages: 10,
                currentPage: 1,
                activeClass: 'current',
                disableClass: 'disabled',
                prev: '<li class="prev paginItem"><a><span class="pagepre"></span></a></li>',
                next: '<li class="next paginItem"><a><span class="pagenxt"></span></a></li>',
                page: '<li class="page paginItem"><a>{{page}}</a></li>',
                onPageChange: (num) => {
                    getCondition();
                    datas.conditionInfo.pageNum = num;
                    getCustomPage(window.datas.conditionInfo);
                }
            });
            //获取地区信息
            getAddressInfo();
        })
    </script>
</head>

<body>
<div class="place"><span>位置：</span>
    <ul class="placeul">
        <li>营销管理</li>
        <li>客户浏览</li>
        <li>基本内容</li>
    </ul>
</div>
<div class="rightinfo">
    <form  class="searchCondition">
        <ul class="tools">
            <li> 公司名称:
                <input type="text" size="12" name="company" class="company"/>
            </li>
            <li> 客户姓名:
                <input type="text" size="12" name="customName" class="customName"/>
            </li>
            <li> 所属区域：
                <select class="province" name="provinceId" onchange="provinceChange()">
                    <option value="">请选择省份</option>
                </select>
                <select class="city">
                    <option value="">请选择城市</option>
                </select>
            </li>
            <li class="subBut" onclick="search()"><img src="../../../static/images/t06.png"/>查询</li>
        </ul>
        <table class="tablelist">
            <thead>
            <tr>
                <th>序号</th>
                <th>客户姓名</th>
                <th>性别</th>
                <th>联系电话</th>
                <th>所属公司</th>
                <th>所属区域</th>
                <th>分配时间</th>
                <th>客户人员</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody class="formbody">

            </tbody>
        </table>
        <div class="pagin">
            <div class="message">共<i class="blue"></i>条记录，当前显示第&nbsp;<i class="blue"></i>页</div>
            <!--      分页菜单-->
            <ul class="paginList">
            </ul>
        </div>
    </form>
</div>
<script type="text/javascript">
    $('.tablelist tbody tr:odd').addClass('odd');
</script>
</body>
</html>
